<template>
  <div>
    <el-menu :default-active="this.$route.path" class="el-menu-demo" mode="horizontal" active-text-color="#409EFF" router @open="handleOpen"
      @close="handleClose">
      <el-menu-item>
        <el-link style="color: #409eff; font-size: 20px; font-weight: 900" href="/">Smitish博客平台</el-link>
      </el-menu-item>
      <el-menu-item v-for="(item, i) in navList" :key="i" :index="item.name">
        <template slot="title">
          <span class="title"> {{ item.navItem }}</span>
        </template>
      </el-menu-item>
      <el-menu-item>
        <template slot="title">
          <a class="title" @click="randBlog"> 随机一篇</a>
        </template>
      </el-menu-item>
      <el-menu-item style="float: right">
        <el-button v-show="!hasLogin" type="primary" size="mini" @click="login" plain>登入</el-button>
        <el-button v-show="!hasLogin" type="primary" size="mini" @click="register">注册</el-button>
        <el-dropdown v-show="hasLogin">
          <el-avatar :size="30" :src="user.avatar"></el-avatar>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item disabled style="user-select: none">{{
              user.username
            }}</el-dropdown-item>
            <el-dropdown-item>
              <el-link :href="'/home/' + user.id">个人主页</el-link>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-link @click="drawer = true">我的关注</el-link>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-link href="/blog/add">发表博客</el-link>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-link @click="logout" type="danger">退出账号</el-link>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-menu-item>
      <el-menu-item style="float: right">
        <el-dropdown v-show="hasLogin">
          <el-badge :value="2" :max="99" class="item" style="user-select: none">
            <el-button size="mini" type="warning" class="el-icon-message-solid" circle></el-button>
          </el-badge>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item disabled style="text-align: center; user-select: none">Notice</el-dropdown-item>
            <el-dropdown-item>
              有新的好友关注了你~ <i class="el-icon-close"></i>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-menu-item>
    </el-menu>
    <el-drawer :visible.sync="drawer" :with-header="false">
      <Follower />
    </el-drawer>
  </div>
</template>

<script>
import Follower from "../components/Follower";

export default {
  name: "Header",
  components: { Follower },
  data () {
    return {
      user: {
        username: "请先登录",
        avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        id: "",
      },
      hasLogin: false,
      navList: [
        { name: "/", navItem: "主页" },
        { name: "/blogs", navItem: "博客广场" },
      ],
      drawer: false, // 关注列表抽屉
    };
  },
  methods: {
    logout () {
      const _this = this;
      _this.$axios
        .get("/logout", {
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          _this.$store.commit("REMOVE_INFO");
          _this.$message.success("退出登入！", { duration: 3 * 1000 });
          _this.$router.push("/login");
        });
    },
    randBlog () {
      this.$axios.get("/blog/random").then((res) => {
        this.$router.push("/blog/" + res.data.data.id);
        location.reload();
      });
    },
    login () {
      this.$router.push("/login");
    },
    register () {
      this.$router.push("/register");
    },
    handleSelect () { },
    handleOpen (key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath);
    },
  },
  created () {
    const _this = this;
    // console.log("123" + JSON.stringify(this.$store.getters.getUser))
    if (
      sessionStorage.getItem("userInfo") == null ||
      sessionStorage.getItem("userInfo") == "{}"
    ) {
      _this.$store.commit("SET_USERINFO", {});
    }
    if (this.$store.getters.getUser.username) {
      this.user.username = this.$store.getters.getUser.username;
      this.user.avatar = this.$store.getters.getUser.avatar;
      this.user.id = this.$store.getters.getUser.id;
      this.hasLogin = true;
    }
  },
};
</script>

<style scoped>
/deep/ :focus {
  outline: 0;
}
.title {
  font-size: 1.1375rem;
  padding: 1.25rem 0.5rem;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: none;
  color: #303133;
}
.m-content {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}
.menu-item {
  font-size: 18px;
}
.el-link.is-underline:hover:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  bottom: 0;
  border-bottom: 0px solid #409eff;
}
a:hover {
  color: #0056b3;
  text-decoration: none;
}
</style>
